<template>
  <div id="app-container">
    <!--条件查询表单-->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="querySearchTeamVo.name" placeholder="团队名称"/>
      </el-form-item>
    </el-form>

    <el-button type="primary" icon="el-icon-search" @click="getList(-1)">查询</el-button>
    <el-button type="default" @click="resetData()">清空搜索条件</el-button>


    <!--数据显示列表-->
    <el-table :data="dataList" fit highlight-current-row>
      <el-table-column type="index" label="序号" width="70">
        <template slot-scope="scope">
          {{pageSize * (currentPage - 1) + scope.$index + 1 }}
        </template>
      </el-table-column>

      <el-table-column prop="id" label="编号" width="80" ></el-table-column>
      <el-table-column prop="name" label="团队名称" width="80" ></el-table-column>
      <el-table-column prop="dcName" label="团队长" width="80" ></el-table-column>
      <el-table-column prop="label" label="团队标签" width="100" >
        <!--  TODO        -->

        <template slot-scope="scope">
          <el-tag v-model="scope.row.id"  v-for="lab in scope.row.labels" v-if="scope.row.labV" type="success">{{getLabel(lab)}}</el-tag>
        </template>


      </el-table-column>
      <el-table-column prop="jgName" label="所属机构" ></el-table-column>
      <el-table-column prop="dataList.status" label="状态" >
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            active-text="启用"
            inactive-text="未启用"
            active-value = "1"
            inactive-value= "0"
          >
          </el-switch>
        </template>
      </el-table-column>






      <el-table-column label="操作" width="200">
        <template slot-scope="scope">

            <el-button @click="succe" type="primary" size="mini" icon="el-icon-edit">申请加入团队</el-button>

        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[1, 2, 3, 5]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

  </div>
</template>

<script>
// 导入team api
import team from "../../../api/admin/team";
import axios from "axios";


export default {
  // 必须使用方法，需要给返回值
  data(){
    return {
      status:"",
      querySearchTeamVo: {},             // 搜索的数据模型对象
      currentPage: 1,                 // 当前页
      pageSize: 2,                    // 每页记录数
      dataList: [],                   // 分页数据
      total: 0,                       // 总记录数
      labels:{

      },
    }
  },
  created(){
    this.getList();
  },
  methods:{
    // 页面初始化查询数据
    getList(value){

      if(value == -1){
        // 点击搜索之后应该从第一页开始查询
        this.currentPage = 1;
      }
      axios.get("http://localhost:8080/label").then(res=>{
        this.labels = res.data.data
      })
      // 此处应该调用api里面的相关方法 getList
      team.getList(this.currentPage, this.pageSize, this.querySearchTeamVo).then(res => {
        // 以前要获取响应的数据  res.data  拿到的此时result对象
        // 此处 res就是result对象
        console.log(res);
        // 将查询出来的分页数据赋值给数据模型
        this.dataList = res.data.data;

        this.dataList.forEach(team=>{
          axios.get("http://localhost:8080/team/team/label/"+team.id).then(res=>{
            team.labels = res.data.data;
            team.labV=true;
          })
        })

        this.total = res.data.total;
      });
    },
    getLabel(id){
      for (let i =0 ;i<this.labels.length;i++){
        if (this.labels[i].id == id)return this.labels[i].name

      }
    },
    // 每页记录数发生变化
    handleSizeChange(size){
      this.pageSize = size;
      this.getList();
    },
    // 当前页发生变化
    handleCurrentChange(current){
      this.currentPage = current;
      this.getList();
    },
    // 清空数据
    resetData(){
      // 清空搜索的内容
      this.querySearchTeamVo = {};
      // 重新查询数据
      this.getList();
    },
    succe(){
      alert("加入成功")
    }

  }
}
</script>
